<template>
  <div class="app">
    <!-- from弹窗 -->
    <el-dialog
      :title="booktitle"
      :visible.sync="dialogFormVisible"
      width="500px"
      class="dialogbox"
    >
      <el-form label-width="80px" :model="form" ref="form" :rules="rules">
        <el-form-item label="图书标题" prop="title">
          <el-input
            v-model="form.title"
            placeholder="请输入图书标题"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="图书描述" prop="desc">
          <el-input
            v-model="form.desc"
            placeholder="请输入图书描述"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item prop="createdTime" label="借出日期">
          <el-date-picker
            v-model="form.createdTime"
            placeholder="选择借出日期"
            style="width: 380px"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item prop="alarmTime" label="入库日期">
          <el-date-picker
            v-model="form.alarmTime"
            placeholder="选择入库日期"
            style="width: 380px"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item prop="booktype" label="图书类型">
          <el-select
            class="dialog-sel"
            v-model="form.booktype"
            placeholder="请选择图书类型"
          >
            <el-option label="小说" value="1"></el-option>
            <el-option label="散文" value="2"></el-option>
            <el-option label="诗歌" value="3"></el-option>
            <el-option label="图册" value="4"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否借出" prop="lend" class="dialogradio">
          <el-radio v-model="form.lend" label="1" size="medium"
            >未借出</el-radio
          >
          <el-radio v-model="form.lend" label="2" size="medium"
            >已借出</el-radio
          >
        </el-form-item>
        <el-form-item prop="checked" label="书本全选" class="cng-elnew">
          <el-checkbox v-model="form.checked">全选</el-checkbox>
        </el-form-item>
        <el-form-item prop="count" label="书本数量" class="cng-el-number">
          <el-input-number
            v-model="form.count"
            size="medium"
            label="1"
          ></el-input-number>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="info" @click="resetinform">重置</el-button>
        <el-button type="info" @click="resetForm">取消</el-button>
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
      </div>
    </el-dialog>
    <div class="app-out">
      <div class="app-in">
        <div class="top">
          <div class="top-left topleft-el">
            <div class="top-left-div">图书标题:</div>
            <el-input
              v-model="keytitle"
              placeholder="请输入图书标题"
              maxlength="100px"
              class="top-left-iput"
            ></el-input>
            <div class="top-left-div top-left-div-r">选择日期:</div>
            <el-date-picker
              unlink-panels:false
              v-model="keytime"
              type="daterange"
              range-separator="至"
              start-placeholder="借出日期"
              end-placeholder="入库日期"
            >
            </el-date-picker>
          </div>
          <div class="top-right">
            <el-button class="top-right-btnR" type="info" @click="restop"
              >重置</el-button
            >
            <el-button class="top-right-btnL" type="primary" @click="lookFor()"
              >查询</el-button
            >
          </div>
        </div>
        <div>
          <div class="bom-out">
            <div class="bom-out-in">
              <el-button
                class="bom-out-in-but"
                @click="AddnewBook"
                type="primary"
                >新建任务</el-button
              >
              <el-button type="primary" @click="delArray()">删除勾选</el-button>
            </div>
          </div>
          <div class="bom-down">
            <el-table
              border
              ref="multipleTable"
              @selection-change="handleSelectionChange"
              :data="myfil"
              height="710px"
              :header-cell-style="{ background: '#F5F7FA', height: '60px' }"
            >
              <el-table-column
                min-width="40px"
                type="selection"
              ></el-table-column>
              <el-table-column prop="id" label="序列"></el-table-column>
              <el-table-column prop="title" label="图书标题"></el-table-column>
              <el-table-column prop="desc" label="图书描述"></el-table-column>
              <el-table-column
                prop="createdTime"
                label="借出日期"
              ></el-table-column>
              <el-table-column
                prop="alarmTime"
                label="入库日期"
              ></el-table-column>
              <el-table-column prop="done" label="操作">
                <template slot-scope="scope">
                  <!-- 编辑按钮 -->
                  <el-button class="button-1" circle @click="myedit(scope.row)">
                    <i class="el-icon-edit-outline"></i>
                  </el-button>
                  <!-- 删除按钮 -->
                  <el-button class="button-2" circle @click="delRow(scope.row)">
                    <i class="el-icon-delete"></i>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <div class="pag Page-number">
              <el-pagination
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                :current-page="page"
                :page-sizes="[5, 10]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { filtertime } from "@/utils/timer";
import {
  AddBook,
  DelBook,
  EditBook,
  GetBook,
} from "@/api/bookManage/BookManage";
export default {
  name: "bookManage",
  data() {
    return {
      booktitle: "",
      total: 0,
      pageSize: 10,
      isAdd: true,
      selectionlist: "",
      keytitle: "",
      keytime: "",
      dialogFormVisible: false,
      page: 1,
      resetpage: "",
      form: {
        id: "",
        title: "",
        desc: "",
        createdTime: "",
        alarmTime: "",
        booktype: "",
        lend: false,
        count: 0,
        checked: "",
      },
      rules: {
        title: [{ required: true, message: "请输入书本标题", trigger: "blur" }],
        desc: [{ required: true, message: "请输入书本描述", trigger: "blur" }],
        createdTime: [
          { required: true, message: "请选择修改日期", trigger: "blur" },
        ],
        alarmTime: [{ required: true, message: "请输入日期", trigger: "blur" }],
      },
      myfil: [],
    };
  },
  created() {
    this.mysearch();
  },
  methods: {
    //新增图书弹框
    AddnewBook() {
      this.booktitle = "新增图书";
      this.isAdd = true;
      this.dialogFormVisible = true;
      this.booktype = "";
      // resetFields 与 clearValidate 区别
      //如果先点编辑再点新增，新增就会出现编辑内容,需要手动清除
      this.form = {
        title: "",
        desc: "",
        createdTime: "",
        alarmTime: "",
      };
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      });
    },
    //弹框内重置按钮
    resetinform() {
      this.$nextTick(() => {
        this.$refs.form.resetFields();
      });
    },
    //顶部搜索框重置按钮
    restop() {
      this.keytitle = "";
      this.keytime = "";
      this.handleCurrentChange(1);
    },
    //删除表格单行按钮
    delRow(row) {
      this.$confirm(`是否删除${row.title}`, "删除确认", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        //删除api
        DelBook({
          id: row.id,
        }).then((res) => {
          console.log(res);
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.handleCurrentChange(1);
        });
      });
    },
    //批量删除
    delArray() {
      // 拿到选中的数据；
      var val = this.selectionlist;
      // 如果选中数据存在
      if (val) {
        // 将选中数据遍历
        this.$confirm("确定要删除勾选内容吗", "删除确认", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          val.forEach((item) => {
            // 遍历源数据
            this.myfil.forEach((itemI) => {
              // 如果选中数据跟源数据某一条相等，删除对应的源数据
              if (item.title === itemI.title) {
                //循环调用删除api
                DelBook({
                  id: item.id,
                }).then((res) => {
                  console.log(res);
                  this.mysearch();
                  this.$message({
                    message: "删除成功",
                    type: "success",
                  });
                  // 清除选中状态
                  this.$refs.multipleTable.clearSelection();
                  //赋为空值
                  this.selectionlist = "";
                  this.handleCurrentChange(1);
                });
              }
            });
          });
        });
      }
    },
    //获取全选的数组对象
    handleSelectionChange(data) {
      //判断勾选状态是否为空，若为空把selectionlist的值赋为空
      if (data.length == 0) {
        this.selectionlist = "";
      } else {
        this.selectionlist = data;
      }
    },
    //获取当前页码
    handleCurrentChange(value) {
      this.page = value;
      this.resetpage = value;
      this.mysearch();
      this.page = this.resetpage;
    },
    //获取当前每页多少行，默认值为10
    handleSizeChange(value) {
      this.pageSize = value;
      this.mysearch();
    },
    //form表单取消按钮
    resetForm() {
      this.dialogFormVisible = false;
    },
    //form表单验证+提交
    submitForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (this.isAdd) {
            // 添加api
            AddBook({
              title: this.form.title,
              desc: this.form.desc,
              createdTime: this.form.createdTime,
              alarmTime: this.form.alarmTime,
            }).then((res) => {
              console.log(res);
              this.$message({
                message: "添加成功",
                type: "success",
              });
              this.dialogFormVisible = false;
              this.mysearch();
            });
            this.page = 1;
            return;
          }
          // 编辑api
          EditBook({
            id: this.form.id,
            title: this.form.title,
            desc: this.form.desc,
            createdTime: this.form.createdTime,
            alarmTime: this.form.alarmTime,
          }).then((res) => {
            console.log(res);
            this.$message({
              message: "内容已经修改",
              type: "success",
            });
            this.dialogFormVisible = false;
            this.mysearch();
            this.page = this.resetpage;
          });
          this.page = this.resetpage;
        }
      });
    },
    //点击编辑按钮出现弹框
    myedit(rows) {
      this.isAdd = false;
      this.booktitle = "编辑图书";
      this.dialogFormVisible = true;
      this.form = JSON.parse(JSON.stringify(rows));
      this.form.checked = "";
      this.form.count = 0;
      //判断$refs是否加载出来
      if (typeof this.$refs.form !== "undefined") {
        this.$refs.form.resetFields();
      }
    },
    //搜索按钮
    mysearch() {
      //搜索api
      GetBook({
        keywords: this.keytitle,
        startTime: this.keytime[0],
        endTime: this.keytime[1],
        page: {
          pageSize: this.pageSize,
          pageNum: this.page,
        },
      }).then((res) => {
        res.data.rows.map((item) => {
          item.alarmTime = filtertime(item.alarmTime);
          item.createdTime = filtertime(item.createdTime);
        });
        this.myfil = res.data.rows;
        this.total = res.data.count;
      });
    },
    lookFor() {
      this.page = 1;
      this.mysearch();
    },
  },
};
</script>

<style scoped>
.app {
  width: calc(100vw - 220px);
  background-color: #f0f1f5;
  /* 这个div样式是外面最大的div用来占位 */
}
.app-out {
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #f0f1f5;
}
.app-in {
  padding-left: 20px;
  padding-right: 20px;
  background-color: #fff;
}
.top {
  width: 100%;
  min-width: 1035px;
  height: 80px;
  background-color: rgb(255, 255, 255);
  border-bottom: 1px solid rgb(207, 207, 207);
}
.top-left {
  height: 80px;
  width: 500px;
  display: flex;
  justify-content: start;
}
.top-left-div {
  min-width: 80px;
  height: 80px;
  line-height: 80px;
}
.top-left-div-r {
  margin-left: 15px;
}
.top-left-iput {
  height: 80px;
  line-height: 80px;
  width: 200px;
}
.top-left-iput ::v-deep .el-input__inner {
  width: 204px;
}

.top-right {
  float: right;
  position: relative;
  left: 20px;
  top: -80px;
  width: 200px;
  height: 80px;
}
.top-right-btnR {
  margin-top: 20px;
  margin-left: 5px;
  margin-right: 5px;
  font-weight: 400;
}
.top-right-btnL {
  /*background-color: rgb(61, 186, 149);*/
  color: white;
}
/* .bom {
  width: 100%;
  height: 100%;
} */
.bom-out {
  height: 60px;
  width: 100%;
  min-width: 1035px;
  background-color: rgb(255, 255, 255);
  border-bottom: 1px solid rgb(207, 207, 207);
}
.bom-out-in {
  float: left;
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 220px;
  margin-top: 10px;
}
.bom-out-in-but {
  width: 100px;
  color: white;
}
.dialog-sel ::v-deep .el-input__inner {
  width: 380px;
}
.bom-down {
  width: 100%;
  min-width: 1035px;
  height: 100%;
  background-color: white;
}
.pag {
  height: 50px;
  width: 100%;
}
.button-1 {
  margin-left: -10px;
  border: none;
  font-weight: bold;
  font-size: 16px;
  background-color: rgba(255, 255, 255, 0);
}
.button-1 ::v-deep .el-icon-edit-outline:before {
  color: #85e1c3;
  font-size: medium;
}
.button-2 {
  position: relative;
  right: 15px;
  border: none;
  font-size: 16px;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0);
}
.button-2 ::v-deep .el-icon-delete:before {
  color: #f68888;
}
.dialogbox ::v-deep .el-dialog {
  border-radius: 10px;
  text-align: center;
}
.dialogradio ::v-deep .el-radio {
  left: -108px;
}
.topleft-el ::v-deep .el-date-editor .el-range-input {
  width: 72px;
}
.topleft-el ::v-deep .el-range-editor.el-input__inner {
  margin-top: 20px;
}
.Page-number ::v-deep .el-pagination {
  margin-top: 10px;
  float: right;
  padding-right: 50px;
}
.cng-elnew ::v-deep .el-checkbox {
  position: relative;
  left: -163px;
}
.cng-el-number ::v-deep .el-input-number {
  left: -89px;
}
</style>